<template>
  <div class="list-item">
    <div :style="{width: columnWidth[0]}">
      <img :src="data.picture"/>
      <div>
        <p class="ellipsis">{{ data.name }}</p>
        <p class="ellipsis">{{ data.attrsText }}</p>
      </div>
    </div>
    <div :style="{width: columnWidth[1]}">￥{{ data.price }}</div>
    <div :style="{width: columnWidth[2]}">{{ data.count }}</div>
    <div :style="{width: columnWidth[3]}">￥{{ (data.price * data.count).toFixed(2) }}</div>
    <div :style="{width: columnWidth[4]}">￥{{ (data.price * data.count).toFixed(2) }}</div>
  </div>
</template>

<script lang="ts"
        setup>
import type {CartItem} from '@/types/cart'

defineProps<{
  data: CartItem
  columnWidth: string[]
}>()
</script>

<style lang="less"
       scoped>
.list-item {
  display: flex;
  border-bottom: 1px solid #f5f5f5;

  > div {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:nth-child(1) {
      padding: 20px;
      justify-content: flex-start;
      display: flex;
      align-items: center;

      img {
        width: 70px;
        height: 70px;
        margin-right: 10px;
      }

      div {
        height: 100%;

        p {
          line-height: 24px;

          &:nth-of-type(2) {
            color: #999999;
          }
        }
      }
    }
  }
}
</style>